<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车页面</title>
    <link
    rel="stylesheet"
    href="http://at.alicdn.com/t/font_3210907_ea7t6cc4dr7.css"
  />
    <script src="../js/axios.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .font{
        width:500px;
        height:50px;
        line-height: 50px;
        margin: 0 450px;
      }
      .shopCarText{
        text-align:center;
        font-size: 23px;
        margin-right: 80px;
      }
      img {
        width:200px;
        height:200px;
        float:left
      }
      ul {
        width:530px;
        height:1500px;
        margin:0 auto;
      }
      li {
        /* margin-bottom: 10px; */
        list-style: none;
      }
   .shopCarItem{
     height:200px;
     float: left;
     margin-top:20px;
   }
   .shopCarItem p{
     margin-bottom: 8px;

   }
  .all-check ,.single-check {
        width:20px;
      }
    </style>
  </head>
    <div class="font">
      <span class="shopCarText">您的购物车</span>
      <span class="iconfont icon-gouwuche1" style="font-size:23px; text-align: center;"></span>
    </div>
    <hr>
    <input type="checkbox" class="all-check" onchange="allCheck(this)">总计
    <span class="all-counts"></span>
    <ul></ul>
   
    <script>
      //   查询用户购物车中的商品 接口
      //   接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
      //   接口请求方式：get
      //   接口参数：
      //        id  用户id

      // 使用方式
      // 获取id为1的用户的购物车
      // http://jx.xuzhixiang.top/ap/api/cart-list.php?id=1

      //   服务器返回json数据;

      loadListCar();
      async function loadListCar() {
        let shopCarAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
        let id = localStorage.getItem("id");
        //   axios.get(shopCarAPI,{params:{
        //       id
        //   }}).then(res=>{
        //       console.log(res.data);
        //   })

        let res1 = await axios.get(shopCarAPI, {
          params: {
            id,
          },
        });
        // console.log(res1.data.data);
        // alert(res1.data.msg);
        let liArr = res1.data.data.map(
          (v) => `
       <li>
       
       <img src="${v.pimg}" alt="">
       <div class="shopCarItem">
        <input type="checkbox" class="single-check" onchange="singleCheck()">
       <p>${v.pname}</p>      
       <p>${v.pdesc}</p>
       <span>${v.pnum}*${v.pprice}</span>
       <input type="number" value="${v.pnum}" onchange="alertShopCarList(${v.pid},this)" min="1"  style="width:30px;text-align:center">
       <button onclick="deleteShopCarList(${v.pid})" class="iconfont icon-shanchu1" style="border:0px;font-size:18px;"></button>
       <p class="totalNum">小计:￥<span class="line-count">${v.pnum * v.pprice}</span></p>
       <button>前往购买</button>
       </div>
       </li>

     
        `
        );
        document.querySelector("ul").innerHTML = liArr.join("");
      }
      function allCheck(allCheckIpt){
        //这个allCheckIpt就是那个input输入框
        document.querySelectorAll(".single-check").forEach(v =>v.checked=allCheckIpt.checked,
        {});
        countAll();
      }
      function singleCheck(){
        //如果一个单选框的状态发生改变，那么判断所有的单选框的状态是否都发生改变，如果都发生改变，那么总计的框也应该发生改变
        //我们准备采用数组里面有个方法every来判断是否满足条件
        let singleChecks=document.querySelectorAll(".single-check");
        // console.log(singleChecks);//这玩意儿不是一个真的数组
        let singleCheckArr=Array.from(singleChecks);//用这个方法能把假数组转换成真数组
        // console.log(singleCheckArr);
        let isAll=singleCheckArr.every(ipt=>ipt.checked==true);//every方法和some方法返回值都是true或者false
        document.querySelector(".all-check").checked=isAll;
        countAll();
      }
      //计算总价处理
      function countAll(){
        let singleipts=document.querySelectorAll(".single-check");
        console.log(singleipts);
        let allArr=Array.from(singleipts);
        console.log(allArr);
        let count=0;
        let allArr1 = allArr.filter((v) => v.checked == true);
        allArr1.forEach((ipt)=>{
          let linecountSpan=ipt.parentElement.querySelector(".line-count");
          console.log(linecountSpan)   
          count+=Number(linecountSpan.innerHTML);
        }
        
        )
        document.querySelector(".all-counts").innerHTML=count+"元";
      }
      countAll();

      // 更新购物车中商品数量 接口
      // 接口地址：http://jx.xuzhixiang.top/ap/api/cart-update-num.php
      // 接口请求方式：get
      // 接口参数：
      //      uid  用户id
      //      pid  商品id
      //      pnum  要添加的商品数量

      // 使用方式

      //      http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=1&pid=1&pnum=1

      // 服务器返回json数据
      async function alertShopCarList(pid, ipt) {
        console.log(pid);
        let alertShopCarListAPI =
          "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
        let uid = localStorage.getItem("id");
        let pnum = ipt.value;
        let res1 = await axios.get(alertShopCarListAPI, {
          params: {
            uid,
            pid,
            pnum,
          },
        });
        // alert(res1.data.msg);
        loadListCar();
        countAll();
      }

      //   接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
      // 接口请求方式：get
      // 接口参数：
      //      uid  用户id
      //      pid  商品id

      // 使用方式
      //      删除用户1中的 id为1商品
      //      http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=1&pid=1

      // 服务器返回json数据
      async function deleteShopCarList(pid) {
        console.log("dianjie");
        let deleteShopCarListAPI =
          " http://jx.xuzhixiang.top/ap/api/cart-delete.php";
        let uid = localStorage.getItem("id");
        let res1 = await axios.get(deleteShopCarListAPI, {
          params: {
            pid,
            uid,
          },
        });
        alert(res1.data.msg);
        loadListCar();
        countAll();
      }
    </script>
  </body>
</html>
